<script setup>
import { ref, onMounted, reactive } from 'vue'
import DataMap from '@/utils/data-map'
import BigMap from '@/utils/big-map'
import DataDetail from './DataDetail.vue'
import { useMapStore } from '@/stores/map'

const mapStore = useMapStore()

const dataDetail = reactive({
  show: false,
  props: {},
})

const mainMapRef = ref()
const bigMapRef = ref()

const state = reactive({
  isSub: false,
})

let bigMap
let mainMap

onMounted(() => {
  bigMap = new BigMap(bigMapRef.value, {
    // 村标记点击
    hamletPointOnClick(item) {
      dataDetail.show = true
      dataDetail.props = {
        data: {
          ...item,
          level: 'village',
        },
      }
    },
  })
  mainMap = new DataMap(mainMapRef.value, {
    zoom: 10.3,
    // 镇地图点击
    townMapOnClick(townItem, ponit) {
      state.isSub = true

      bigMap.polygon(townItem, ponit)
      bigMap.addPointMark(mapStore.mapCollectionPointLngLat)

      // mainMap.addPointMark(mapStore.mapCollectionPointLngLat)
      mapStore.mapFullScreenChange(state.isSub)
    },
    // 镇标签点击
    townLabelOnClick(title) {
      dataDetail.show = true
      dataDetail.props = {
        data: {
          townName: title,
          level: 'town',
        },
      }
    },
  })
})

const handleGoBack = () => {
  state.isSub = false

  bigMap.clearMap()

  // map.clearMap()
  // map.initDistrictMap()
  mapStore.mapFullScreenChange(state.isSub)
}
</script>

<template>
  <div class="container">
    <div ref="mainMapRef" class="map main-map" :style="{ opacity: state.isSub ? 0 : 1 }"></div>
    <div
      ref="bigMapRef"
      class="map big-map"
      :style="state.isSub ? '' : `opacity: 0;pointer-events: none;`"
    ></div>

    <div class="go-back" v-if="state.isSub" @click="handleGoBack">{{ '<' + ' 返回' }}</div>

    <DataDetail v-model:show="dataDetail.show" v-bind="dataDetail.props" />
  </div>
</template>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  position: relative;
}
.map {
  background: none !important;
  left: 0;
  top: 0;
  position: absolute;
  width: 100%;
  height: 100%;
}

.go-back {
  position: absolute;
  top: 24px;
  left: 24px;
  width: 67px;
  height: 44px;
  background: rgba(0, 152, 221, 0.3);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
</style>
<style lang="scss">
.map {
  .mark {
    width: 140px;
    display: flex;
    flex-direction: column;
    .name {
      background: #0071b7;
      height: 24px;
      font-family: PingFangSC-Semibold;
      font-size: 15px;
      color: #fff;
      font-weight: 500;
      padding-left: 5px;
      line-height: 24px;
      text-align: center;
    }

    .value {
      line-height: 24px;
      padding-left: 5px;
      background: #002434;
      height: 24px;
      font-family: PingFangSC-Semibold;
      font-size: 13px;
      color: #fff;
      font-weight: 600;
      em {
        color: hsla(0, 0%, 100%, 0.8);
        font-weight: 400;
        font-style: normal;
      }
    }
  }
}

.village-maker {
  background-color: #fff;
  border-radius: 4px;
  padding: 5px 12px;
  font-size: 12px;
  min-width: 100px;
}
</style>
